<template>
  <div>
    <!-- 作者：黄楚斌 -->
      <myheader></myheader>
    <!-- 实训平台背景 -->
    <div class="header-background">
      <img src="../../assets/shixunpingtai.png" alt="" />
    </div>
    <!-- 标题们 -->
    <div class="title">
      <!-- 标题们的真正的内容 -->
      <div style="display: flex" v-for="(tl, index) in titleList" :key="'a-' + index">
        <div class="title-all">{{ tl.type }}</div>
      </div>
    </div>
    <div class="black-line">
    </div>
    <!-- 标题后的内容 -->
    <div style="display: flex; justify-content: center">
      <!-- Header -->
      <div>
        <div class="fixed">
          <div class="box">
            <!-- 平台概述和蓝横线 -->
            <div class="title-type">平台概述</div>
            <div style="display: flex; justify-content: center">
              <div class="blue-line"></div>
            </div>
            <!-- 图片和文本 -->
            <div class="content">
              <div style="margin-left: 100px"><img style="width: 365px; height: auto" src="../../assets/television.jpg" alt="" /></div>
              <div class="content-type">{{ types }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div style="width: 1920px; background-color: #f9f9f9">
        <!-- 平台特色 大盒子 -->
        <div class="characteristic">
          <div class="title-type">平台特色</div>
          <div style="display: flex; justify-content: center">
            <div class="blue-line"></div>
          </div>
          <!-- 内容 -->
          <div class="content">
            <div class="tese-box" v-for="(tese, index) in teses" :key="'a' + index">
              <!-- 每一个小块 -->
              <!-- 蓝线   @mouseout="godiscoloration" @mouseover="discoloration" :style="one" -->
              <div class="xiao-box" >
               <div class="img-blue-line" ></div>
                <div>
                  <img style="width: 110px; height: 90px" :src="tese.url" alt="" />
                </div>
                <div class="tese-name">{{ tese.type01 }}</div>
                <div class="tese-type">{{ tese.type02 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 用户场景 大盒子 -->
    <div style="display: flex; justify-content: center">
      <div class="userback">
        <div class="title-type">用户场景</div>
        <div style="display: flex; justify-content: center">
          <div class="blue-line"></div>
        </div>
        <!-- 内容 -->
        <div style="margin-top: 50px; display: flex">
          <!-- 左边图片 -->
          <div style="margin-left: 85px">
            <img src="../../assets/work.png" alt="" />
          </div>
          <!-- 列表  -->
          <div>
            <div v-for="(cj, index) in changjing" :key="'a' + index">
              <div class="liebiao">
                <div><img style="margin-top: 10px" :src="cj.url" alt="" /></div>
                <div style="margin-left: 20px">
                  <div style="font-size: 20px; font-weight: 900">{{ cj.identity }}</div>
                  <div>{{ cj.type }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 在线体验 -->
    <div class="zaixian">
      <div>
        <div class="zaixian-type">在线体验</div>
        <div style="margin-top: -15px; text-align: center">
          <img class="white-line" src="../../assets/baixian.png" alt="" />
        </div>
        <div class="zaixian-type02">立即使用，体验巴拉巴拉、了解小魔仙们</div>
        <div style="text-align: center"><div class="zaixian-anniu">立即体验</div></div>
      </div>
    </div>
    <!-- 底部 -->

    <!-- ROUTER -->
    <mybottom></mybottom>

    <!-- BOTTOM -->
  </div>
</template>

<script>
import myheader from '@/components/Header.vue';
import mybottom from '@/components/Bottom.vue';

export default {
    components:{myheader,mybottom},
  data() {
    return {
      message: 'hello world',
      one:'',
      titleList: [
        {
          type: '平台概述',
          id:1
        },
        {
          type: '平台概述',
          id:2
        },
        {
          type: '平台概述',
          id:3
        },
        {
          type: '平台概述',
          id:4
        },
      ],
      types:
        '机智云平台是机智云物联网公司经过多年行业内的耕耘及对物联网行业的深刻理解，而推出的面向个人、企业开发者的一站式智能硬件开发及云服务平台。平台提供了从定义产品、设备端开发调试、应用开发、产测、云端开发、运营管理、数据服务等覆盖智能硬件接入到运营管理全生命周期服务的能力。机智云平台为开发者提供了自助式智能硬件开发工具与开放的云端服务。通过傻瓜化的自助工具、完善的SDK与API服务能力最大限度降低了物联网硬件开发的技术门槛，降低开发者的研发成本，提升开发者的产品投产速度，帮助开发者进行硬件智能化升级，更好的连接、服务最终消费者。',
      teses: [
        {
          url: require('@/assets/fangkuai.png'),
          type01: '课程资源模块制作',
          type02: '对接 “港客赛证”标准',
        },
        {
          url: require('@/assets/dianshi.png'),
          type01: '教学平台一体设计',
          type02: '对接 “港客赛证”标准',
        },
        {
          url: require('@/assets/tu03.png'),
          type01: '实训资源本地调用',
          type02: '支持院校本地化条用实训资源',
        },
        {
          url: require('@/assets/yun04.png'),
          type01: '线上资源实时分发',
          type02: '公有',
        },
      ],
      changjing: [
        {
          url: require('@/assets/guanliyuan.png'),
          identity: '管理员',
          type: '面向个人、企业开发者的一站式智能硬件开发及云服务平台。平台提供了从定义产品、能硬件接入到运营管理',
        },
        {
          url: require('@/assets/jiaoshi.png'),
          identity: '管理员',
          type: '面向个人、企业开发者的一站式智能硬件开发及云服务平台。平台提供了从定义产品、 件接入到运营管理',
        },
        {
          url: require('@/assets/xuesheng.png'),
          identity: '管理员',
          type: '面 品、设备端开发调试、应用开发、产测、云端开发、运营管理、数据服务等覆盖智能硬件接入到运营管理',
        },
      ],
    };
  },
  created() {},
  methods: {
    //  discoloration(){
    //    this.one= 'background-color: #2e71fe;'
    //  },
    //  godiscoloration(){
    //    this.one= ''
    //  }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to th is component only -->
<style scoped lang="less">
.header-background {
  margin: 0 auto;
  width: 1920px;
}
.title {
  height: 55px;
  display: flex;
  justify-content: center;
}
.black-line{
  width: 100vw;
  height: 1px;
  background-color: black;
  opacity: 0.1;
}
.title-all {
  width: 180px;
  height: 57px;
  text-align: center;
  line-height: 57px;
  font-weight: 600;
}
.title-all:hover{
  color: #2e71fe;
  background-color: #f2f2f2;
}
.box {
  width: 1200px;
  height: 550px;
  padding-top: 60px;
}
.fixed {
  display: flex;
  justify-content: center;
  width: 1200px;
}
.title-type {
  display: flex;
  justify-content: center;
  font-weight: 800;
  font-size: 30px;
}
.blue-line {
  width: 52px;
  height: 3px;
  background-color: #6697fe;
}
.content {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.content-type {
  margin-left: 90px;
  line-height: 28px;
  width: 600px;
  font-size: 15px;
  text-indent: 25px;
  letter-spacing: 2px;
  font-weight: 600;
}
.characteristic {
  // width: 1920px;
  height: 550px;
  background-color: #f9f9f9;
  padding-top: 70px;
}
.tese-box {
  margin-right: 30px;
  display: flex;
  text-align: center;
}
.xiao-box {
  padding-top: 36px;
  text-align: center;
  width: 280px;
  height: 270px;
  background-color: #ffffff;
}
.xiao-box:hover .img-blue-line{
  background-color: blue;
}
.img-blue-line{
  width: 60px;
  height: 4px;
  background-color: #ffffff;
  margin-left: 110px;
  margin-top: -36px;
  margin-bottom: 36px;
  // text-align: center;
}
.tese-name {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 1000;
}
.tese-type {
  margin-top: 20px;
  font-size: 15px;
}
.userback {
  height: 550px;
  padding-top: 60px;
}
.liebiao {
  display: flex;
  width: 460px;
  margin-left: 130px;
  margin-bottom: 47px;
}
.zaixian {
  margin-top: 47px;
  background-color: #1c50b9;
  background-image: url(../../assets/zaixiantiyan.png);
  height: 340px;
  width: auto;
  display: flex;
  justify-content: center;
  padding-top: 65px;
  // flex-direction: row-reverse;
}
.zaixian-type {
  text-align: center;
  font-size: 30px;
  color: white;
}
.white-line {
  margin-top: 15px;
  width: 50px;
}
.zaixian-type02 {
  font-size: 17px;
  margin-top: 30px;
  color: white;
  width: auto;
}
.zaixian-anniu {
  margin-top: 50px;
  border-radius: 20px;
  background-color: #ffffff;
  width: 230px;
  margin-left: 40px;
  height: 45px;
  color: #2e71fe;
  font-size: 20px;
  font-weight: 550;
  line-height: 45px;
  text-align: center;
  // background-image: url(../../assets/yuanju01.png);
}
</style>